<script setup>
import * as api from "@/api/v-sys-service/sys-manage/dict/index.js";

const emits = defineEmits([
  'query',
  'update:modelValue'
])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  parentData: {
    type: Object,
    default: () => {}
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const formData = ref({
  id: '', //字典项ID
  sort: 1, //排序
  name: '',//字典项名称
  value: '',//字典项值
  typeCode: props.parentData.code,//类型编码
  status: true,//字典状态 true 启用 FALSE 禁用
  description: '',//描述
  remark: '',//备注
})
console.log(props.parentData)
const saveBtnLoading = ref(false)
const formRef = ref()

const rules = ref({
  name: [{ required: true, message: "请输入字典项名称", trigger: "blur" }],
  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
})
const visible = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)

const title = computed(
    () => {
      return props.rowData && props.rowData.id ? '编辑字典项' : '新增字典项'
    }
)
watch(
    props.rowData,
    (val) =>{
      if (val && val.id) Object.assign(formData.value,val)
    },
    {
      immediate: true,
    }
)
onMounted(()=>{
  init()
})
const init = () => {

}

const sure = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      saveBtnLoading.value = true
      const { code } = await api.save(formData.value)
      saveBtnLoading.value = false
      if (code === 200){
        visible.value = false
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        emits('query')
      }
    }
  })
}
</script>

<template>
  <v-dialog v-model="visible" :loading="saveBtnLoading" :title="title" @sure="sure">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="字典类型">
            <el-input v-model="parentData.name" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典项名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入字典项名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典值" prop="value">
            <el-input v-model="formData.value" placeholder="字典值" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="描述">
            <el-input
                v-model="formData.description"
                placeholder="描述"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :value="true">启用</el-radio>
              <el-radio :value="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input-number
                v-model="formData.sort"
                controls-position="right"
                :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
                v-model="formData.remark"
                type="textarea"
                placeholder="字典类型备注"
                :autosize="{ minRows: 2, maxRows: 4 }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </v-dialog>
</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
</style>